<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            运行次数 <span>{{index}}</span>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}];
var _Element = null;
export default {
    data() {
        return {
            index: 0,
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();

        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map);

        var _position = { longitude: 111.0, latitude: 31.0 }

        // 按照像素大小显示 单位（px）
        var plate = _Element.add('icon', {
            id: 'Icon2',
            point: { longitude: 111.0, latitude: 31.0 },  // 图像中心
            image: {
                size: { width: 32, height: 32 },
                // Offset: [20, 20], // 偏移量 单位：像素 
                color: '#FF0000',// 图标染色
                url: './image/plane.png',
            },
            label: {
                text: 'AAA',
                fontSize: 16,
                color: '#FFFFFF',
                BGColor: '#000000AA',  // 文字背景颜色
                offset: [0, -32],  // 偏移量 单位：像素
                horizontal: 'CENTER', // 横向对齐属性  LEFT  /  RIGHT  / CENTER
                vertical: 'CENTER'  // 纵向对齐属性  TOP /  BOTTOM  /  CENTER
            }
        });

        // 地图自带事件，类似于 requestAnimationFrame
        // 使用时注意代码运行效率，
        map.on('Tick', () => {
            this.index++;
            // 由于是帧动画，在一些指定的扫描动画，及装饰动画中使用，
            // 涉及业务逻辑的经纬度变化，请不要用这种当时进行绘制
            _position.longitude += 0.1;
            plate.point = _position;
        });
    },
    methods: {

    },
    beforeDestroy() {
        // 注销图层
        _Element && _Element.Destroy();

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
</style>